<!-- 财务总况 -->
<template>
  <!-- 版心头部 -->
  <el-header class="header">
    <el-main class="header-main">
      <span class="header-main-1"></span>
      <span class="header-main-2">今日总览</span>
      <span class="header-main-3">
        <span class="header-n-3-a">\</span>
        <span class="header-n-3-b">/</span>
      </span>
    </el-main>
  </el-header>
  <!-- 版心 -->
  <el-main>
    <img src="../../../img/财务总况/李佳琪.png" alt="" class="main-img1" />

    <div class="main-name">李佳琪BOTTOLE</div>
    <div class="main-id">ID:<span class="main-id-1">896712</span></div>
    <img src="../../../img/财务总况/性别图男.png" alt="" class="main-img-sex" />
    <div class="main-age">29岁</div>
    <div class="main-ke1">可用金额</div>
    <div class="main-fu1">¥<span class="main-fu1-q">5006.32</span></div>
    <button class="main-fu1-btn">提现</button>

    <div class="main-ke2">平台扣税</div>
    <div class="main-fu2">¥<span class="main-fu2-q">1500.64</span></div>
    <button class="main-fu2-btn">查看</button>

    <div class="main-ke3">已用金额</div>
    <div class="main-fu3">¥<span class="main-fu3-q">1306.32</span></div>
    <button class="main-fu3-btn">查看</button>
  </el-main>
  <!--  -->
  <el-footer id="ma">Footer</el-footer>
</template>

<script lang="ts" setup>
import { onMounted } from "vue";
import * as echarts from "echarts";

onMounted(() => {
  const ma = document.getElementById("ma");

  if (ma) {
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(ma);
    // 绘制图表
    myChart.setOption({
      title: {
        text: "当月数据总览",
        top:"3%",
        left:"3%"
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985",
          },
        },
      },
      legend: {
        data: ["提现金额", "可用金额"],
        right:"5%"
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: false,
          data: [
            "07/01",
            "07/03",
            "07/05",
            "07/07",
            "07/09",
            "07/11",
            "07/13",
            "07/15",
            "07/17",
            "07/19",
            "07/21",
            "07/22",
            "07/23",
            "07/24",
            "07/25",
            "07/26",
            "07/27",
            "07/28",
            "07/29",
            "07/30",
            "07/31",
          ],
        },
      ],
      yAxis: [
        {
          type: "value",
        },
      ],
      series: [
        {
          name: "提现金额",
          type: "line",
          // stack: "Total",
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: [
            1200, 1320, 1010, 1340, 900, 2300, 2100, 2121, 4231, 1600, 500,
            2302, 1652, 3578, 6952, 1593, 5682, 2568, 1235, 6254, 2389,
          ],
        },
        {
          name: "可用金额",
          type: "line",
          // stack: "Total",
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: [
            2200, 1820, 1910, 2340, 2900, 3300, 3100, 1200, 1320, 1010, 1340,
            900, 2300, 2100, 2121, 4231, 1600, 500, 2302, 1652, 3578,
          ],
        },
      ],
    });

  }
  
});
</script>

<style lang="less" scoped>
// // 版心头部
.header {
  height: 97px;
  padding: 0;
  margin-bottom: 16px;
  background: #ffffff;
  border-radius: 10px;
  position: relative;
  .header-main {
    width: 100%;
    height: 68px;
    background: #f5f5f5;
    position: absolute;
    top: 16px;
    position: relative;
    .header-main-1 {
      display: block;
      width: 2px;
      height: 16px;
      background: #313033;
      position: absolute;
      top: 24px;
      left: 50px;
    }
    .header-main-2 {
      display: block;
      height: 16px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #313033;
      line-height: 1px;
      position: absolute;
      top: 30px;
      left: 68px;
    }
    .header-main-3 {
      display: block;
      width: 26px;
      height: 26px;
      background: #a890fa;
      position: absolute;
      top: 17px;
      left: 140px;
      position: relative;
      .header-n-3-a {
        width: 7px;
        height: 8px;
        color: #ffffff;
        text-align: center;
        line-height: 32px;
        position: absolute;
        left: 7px;
        top: -3px;
      }
      .header-n-3-b {
        width: 7px;
        height: 8px;
        color: #ffffff;
        text-align: center;
        line-height: 32px;
        position: absolute;
        left: 11px;
        top: -3px;
      }
    }
  }
}
// 版心中间
.el-main {
  width: 100%;
  height: 425px;
  padding: 0;
  background: #f7f7f7;
  position: relative;
  .main-img1 {
    width: 100%;
  }
  .main-name {
    width: 124px;
    height: 16px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #313033;
    line-height: 1px;
    position: absolute;
    top: 55%;
    left: 51%;
    transform: translateX(-50%);
  }
  .main-id {
    width: 59px;
    height: 9px;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #8b68ff;
    line-height: 1px;
    position: absolute;
    top: 62%;
    left: 46%;
    .main-id-1 {
      color: #313033;
    }
  }
  .main-img-sex {
    position: absolute;
    top: 60%;
    left: 52%;
  }
  .main-age {
    width: 30px;
    height: 11px;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #313033;
    line-height: 1px;
    position: absolute;
    top: 62%;
    left: 54%;
  }
  .main-ke1 {
    width: 64px;
    height: 16px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #313033;
    line-height: 1px;
    position: absolute;
    top: 76%;
    left: 15%;
  }
  .main-fu1 {
    width: 198px;
    height: 38px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #313033;
    line-height: 1px;
    position: absolute;
    top: 84%;
    left: 15%;
    .main-fu1-q {
      font-size: 32px;
    }
  }
  .main-fu1-btn {
    width: 66px;
    height: 34px;
    background-color: rgb(52, 218, 37);
    border-radius: 15px;
    border: none;
    position: absolute;
    top: 80%;
    left: 25%;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
  }

  .main-ke2 {
    width: 64px;
    height: 16px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #313033;
    line-height: 1px;
    position: absolute;
    top: 76%;
    left: 45%;
  }
  .main-fu2 {
    width: 198px;
    height: 38px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #313033;
    line-height: 1px;
    position: absolute;
    top: 84%;
    left: 45%;
    .main-fu2-q {
      font-size: 32px;
    }
  }
  .main-fu2-btn {
    width: 66px;
    height: 34px;
    background-color: rgb(194, 201, 194);
    border-radius: 15px;
    border: none;
    position: absolute;
    top: 80%;
    left: 55%;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
  }
  .main-ke3 {
    width: 64px;
    height: 16px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #313033;
    line-height: 1px;
    position: absolute;
    top: 76%;
    left: 80%;
  }
  .main-fu3 {
    width: 198px;
    height: 38px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #313033;
    line-height: 1px;
    position: absolute;
    top: 84%;
    left: 80%;
    .main-fu3-q {
      font-size: 32px;
    }
  }
  .main-fu3-btn {
    width: 66px;
    height: 34px;
    background-color: rgb(194, 201, 194);
    border-radius: 15px;
    border: none;
    position: absolute;
    top: 80%;
    left: 90%;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
  }
}

// 底部
.el-footer {
  width: 100%;
  height: 400px;
  background-color: #fff;
  padding: 0;
}
</style>
